<template>
	<view class="upCoupon-main">
		<view v-if="couponList.length > 0">
			<view class="couponItem" v-for="(item, index) in couponList" :key="item.id" @click="gotoPath(item)">
				<view class="couponInfo">
					<view class="name">
						{{ item.name }}
					</view>
					<view class="pic">满{{ item.full }}减{{ item.price }}</view>
					<view class="auto">领取方式：{{ item.is_auto ? '自动领取' : '手动领取' }}</view>
					<view class="time">创建时间:{{ formatTimestamps(item.createtime) }}</view>
				</view>
				<view class="icon" @click.stop="getstoreCouponDel(item.id)">
					<uni-icons type="trash-filled" size="20" color="#444"></uni-icons>
					<text>删除</text>
				</view>
			</view>
		</view>

		<u-empty mode="list" v-else icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>

		<view class="addAddress-btn" :style="bottomStyle">
			<u-button type="primary" color="#2979ff" text="新增优惠券" shape="circle" @click="gotoPath"></u-button>
		</view>
	</view>
</template>

<script>
import { storeCoupon, storeCouponDel } from '../../../api/payment/index.js';
import { formatTimestamp } from '../../../utils/tools.js';
export default {
	data() {
		return {
			couponList: []
		};
	},
	computed: {
		bottomStyle() {
			const systemInfo = uni.getSystemInfoSync();
			const { safeAreaInsets } = systemInfo;
			const bottomSafeAreaHeight = safeAreaInsets.bottom || 0;
			return `padding-bottom: ${bottomSafeAreaHeight ? bottomSafeAreaHeight + 'px' : '20rpx'}`;
		}
	},
	onShow() {
		this.getstoreCoupon();
	},
	methods: {
		// 优惠券列表
		async getstoreCoupon() {
			try {
				const resData = await storeCoupon({
					type: this.$store.state.storeType
				});
				this.couponList = resData.data.coupon;
			} catch (e) {
				throw Error(e);
			}
		},

		// 删除优惠券
		async getstoreCouponDel(id) {
			try {
				const resData = await storeCouponDel({
					id,
					type: this.$store.state.storeType
				});
				if (resData.code == 1) {
					uni.showToast({
						title: '删除成功',
						icon: 'none'
					});
					this.getstoreCoupon();
				}
			} catch (e) {
				throw Error(e);
			}
		},

		gotoPath(info) {
			let path = '';
			if (info) {
				path = encodeURI(`/pages/storeSide/addCoupon/addCoupon?name=${info.name}&price=${info.price}&full=${info.full}&id=${info.id}&is_auto=${info.is_auto}`);
			} else {
				path = '/pages/storeSide/addCoupon/addCoupon';
			}
			uni.navigateTo({
				url: path
			});
		},

		formatTimestamps(time) {
			return formatTimestamp(time);
		}
	}
};
</script>

<style scoped lang="scss">
.upCoupon-main {
	box-sizing: border-box;
	padding: 20rpx;
	padding-top: 0px;
}
.couponItem {
	background-color: #fff;
	border-radius: 10rpx;
	box-sizing: border-box;
	padding: 20rpx;
	display: flex;
	justify-content: space-between;
	margin-top: 20rpx;
	.couponInfo {
		font-size: 24rpx;
		color: #444;
		flex: 1;
		.name {
			font-size: 28rpx;
		}
		.pic {
			margin: 10rpx 0px;
		}
		.auto {
			margin-bottom: 10rpx;
			color: #999;
		}
		.time {
			color: #999;
		}
	}
}
.addAddress-btn {
	position: fixed;
	bottom: 0rpx;
	left: 0px;
	width: 100%;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	padding: 0px 20rpx;
	padding-top: 20rpx;
	background-color: #fff;
}

.icon {
	margin-left: 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: 26rpx;
	color: #444;
}
</style>
